<{extend name="./content" /}>

<{block name="head"}>
<title>{{:config('web.web_name')}}-主页</title>
<{/block}>

<{block name="css"}>
<link rel="stylesheet" href="/static/css/room.css">
<{/block}>

<{block name="body"}>
<div class="index" >
    <div class="select-menu" id="index">
        <div class="select-item" v-on:click="setshow(1)" v-bind:class="{chacked :show==1}">
            <div class="i">房间</div>
        </div>
        <div class="select-item" v-on:click="setshow(2)" v-bind:class="{chacked :show==2}">
            <div class="i">播放列表</div>
        </div>
        <div v-if="master==1" class="select-item" v-on:click="setshow(3)" v-bind:class="{chacked :show==3}">
            <div class="i">添加视频</div>
        </div>
    </div>
    <div class="theme">
        <div class="room" id="play">
            <div class="play">
                <div id="myVideo" preload="auto"></div>
            </div>
        </div>
        <div id="list">
            <div class="playlist" v-bind:class="{block :show==2}">
                <div class="item playing" v-if="playing.url">
                    <div class="name">{{ playing.name }}</div>
                </div>
                <div class="item" v-for="(item, index) in playlist" v-on:click="replace(index)"  v-bind:class="{playing :playing.url==item.url}">
                    <div class="name">{{ item.name }}</div>
                    <div class="btn-group">
                        <img v-if="index!=0" v-on:click.stop="up(index)" src="/static/icon/up.png"/>
                        <img v-on:click.stop="clearPlay(index)" src="/static/icon/delete.png"/>
                    </div>
                </div>
                <div class="clear" v-on:click="clearPlay()">清空播放列表</div>
            </div>
            <div v-if="master==1" class="add" v-bind:class="{block :show==3}">
                <div class="s-menu">
                    <div class="s-item" v-on:click="menu=1"  v-bind:class="{chacked :menu==1}">
                        <div class="i">本站搜索</div>
                    </div>
                    <div class="s-item" v-on:click="menu=2"  v-bind:class="{chacked :menu==2}">
                        <div class="i">视频解析</div>
                    </div>
                </div>
                <div class="hide" v-bind:class="{show :menu==1}">
                    <div class="form">
                        <input v-model="search.name" placeholder="输入视频名称" maxlength="60"/>
                        <select v-model="search.api">
                            <{volist name="link" id="v"}>
                            <option value="{{$v}}">路线{{$key+1}}</option>
                            <{/volist}>
                        </select>
                        <button v-on:click="sendsearch">搜索</button>
                    </div>
                    <div class="movelist">
                        <div class="li" v-on:click="getdd(index)" v-for="(item, index) in searchinfo">
                            <div class="pic">
                                <img v-bind:src="item.pic">
                                <p v-if="item.state!='0'">共{{ item.state }}集</p>
                            </div>
                            <div class="info">
                                <div class="name">{{ item.name }}</div>
                                <div>年份：{{ item.year }} 语言：{{ item.lang }}</div>
                                <div>最近更新：{{ item.last }}</div>
                                <div class="last">简介：{{ item.des }}</div>
                            </div>
                            <div class="paylist hide" v-bind:class="{show :chackedmove==item.id}">
                                <div class="ptitle">选择添加至播放列表</div>
                                <div>
                                    <div class="pitem" v-on:click.stop="addAll(searchinfo[index])">全部添加</div><div class="pitem" v-for="(value, key) in searchinfo[index].child" v-on:click.stop="addPlay(value,searchinfo[index].name)">{{ value.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hide">

                    </div>
                </div>
                <div class="hide" v-bind:class="{show :menu==2}">
                    <div class="form">
                        <input v-model="submit.url" placeholder="输入需要解析的url" maxlength="60"/>
                        <select v-model="submit.api">
                            <option value="">选择解析路线</option>
                            <{volist name="api" id="v"}>
                            <option value="{{$v['url']}}">路线：{{$v['name']}}</option>
                            <{/volist}>
                        </select>
                        <button v-on:click="analysis">解析</button>
                    </div>
                    <div v-if="yuan.info !==undefined && yuan.info.length>0">
                        <div>
                            <div class="title">解析结果</div>
                            <div class="url item">
                                <span>{{ yuan.title }}</span>
                            </div>
                            <div class="title">可选资源</div>
                            <div class="list">
                                <div v-for="(item, index) in yuan.info" v-on:click="yuan.chack=index" class="yuan"
                                     v-bind:class="{chack :index==yuan.chack}">{{ item.flag_name }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="yuan.info !==undefined && yuan.info.length>0">
                        <div class="title">选集，资源：{{ yuan.info[yuan.chack].flag_name }} (点击添加至播放列表)</div>
                        <div class="list">
                            <div class="" v-for="(item, index) in yuan.info[yuan.chack].video">
                                <div class="item">
                                    <span v-on:click="addPlay(item,yuan.title)">{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="title">快速导航</div>
                        <div class="list">
                            <div v-on:click="newWindows('https://www.iqiyi.com/')" class="yuan">爱奇艺</div>
                            <div v-on:click="newWindows('https://www.bilibili.com/')" class="yuan">哔哩哔哩</div>
                            <div v-on:click="newWindows('https://v.qq.com/')" class="yuan">腾讯视频</div>
                            <div v-on:click="newWindows('https://www.youku.com/')" class="yuan">优酷</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="anthology" v-if="show==1"  v-on:click="closeshow()">
    <div class="content">
        <div class="title">搜索结果（请选择）</div>
        <div class="list">
            <div class="item"  v-for="(item, index) in info" @click.stop="anthology(index)">
                {{ item.title }}（{{ item.from }}）
            </div>
        </div>
    </div>
</div>
<{/block}>

<{block name="tap"}>
<{neq name="type" value="single"}>
<div id="password" v-if="tap=='password'">
    <div class="row head">
        <div class="title">输入密令</div>
        <div v-on:click="goback">返回</div>
    </div>
    <div>
        <input class="password" v-model="submit.password" placeholder="输入密令"/>
    </div>
    <div class="submit"><button v-on:click="joinroom">确定</button></div>
</div>
<div class="tapcontent" id="createRoom"  v-else-if="tap=='createRoom'">
    <div class="row head">
        <div class="title">创建房间</div>
        <div v-on:click="goback">返回</div>
    </div>
    <div class="row">部分浏览器有视频播放插件，导致本系统服务异常<a>点击查看可用浏览器</a></div>
    <div class="row">
        <div class="title inl">房间类型</div>
        <div class="inl select">
            <div class="inl" v-on:click="submit.status=1" v-bind:class="{chacked :submit.status==1}">公开</div>
            <div class="inl" v-on:click="submit.status=2" v-if="submit.status==1" v-bind:class="{chacked :submit.status==2}">私密</div>
            <input type="hidden" v-model="submit.status"/>
            <input class="password" autofocus="autofocus" v-if="submit.status==2" v-model="submit.password" placeholder="输入密令"/>
        </div>
    </div>
    <div class="row">
        <div class="title inl">最多人数</div>
        <div class="inl select">
            <input class="input" type="number" v-model="submit.canpeople"/>
            <span class="tip">2~15人</span>
        </div>
    </div>
    <div class="row">
        <div class="title inl">进房条件</div>
        <div class="inl select">
            <div class="inl" v-on:click="submit.cansex=0" v-bind:class="{chacked :submit.cansex==0}">全部</div>
            <div class="inl" v-on:click="submit.cansex=1" v-bind:class="{chacked :submit.cansex==1}">男</div>
            <div class="inl" v-on:click="submit.cansex=2" v-bind:class="{chacked :submit.cansex==2}">女</div>
            <input type="hidden" v-model="submit.cansex"/>
        </div>
    </div>
    <div class="row">
        <button class="submit" v-on:click="creatroom">创建房间</button>
    </div>
</div>
<{/neq}>
<{/block}>


<{block name="js"}>
<script src="/static/dplayer/hls.js"></script>
<script src="/static/dplayer/DPlayer.min.js"></script>
<script src="/static/js/vue@2.6.11"></script>
<script>
    $('#iframe').onbeforeunload = function (e) {
        e.preventDefault()
        return "你确定要离开吗";
    }
    var type = '{{$type}}';
    var selectedapi = '{{$selectedapi}}';
    var search_default = '{{$link[0]}}'
    var roomStatus,roomId,userinfo
<{eq name="type" value="join"}>
    roomStatus = '{{$roomStatus}}';
    roomId = '{{$roomId}}';
<{/eq}>

</script>
<script src="/static/js/room.js"></script>
<{neq name="type" value="single"}>
<script src="/static/js/socket.js"></script>
<{/neq}>
<{/block}>